<template>
  <div class="v-model">
    <h1>v-model的原理及在自定义组件上如何使用</h1>
    <input type="text" v-model="value" />
    {{ value }}
    <hr />
    <h1>一、模拟v-model:</h1>
    <input @input="onInput" :value="inputValue" />
    {{ inputValue }}
    <hr />
    <h1>二、自定义组件上使用v-model（表单上）</h1>
    <MyInput v-model="myInputValue"></MyInput>
    {{ myInputValue }}

    <h1>三、自定义组件上使用v-model（不在表单上）</h1>

    <NavBar v-model="tabIndex"></NavBar>
  </div>
</template>

<script>
// v-model是用在表单上
// v-model也能用在组件上
// 如果v-model要使用在组件上，一定要搞清楚他的原理
import MyInput from './components/MyInput.vue'
import NavBar from './components/NavBar.vue'
export default {
  components: { MyInput, NavBar },
  data() {
    return {
      value: '',
      inputValue: '',
      myInputValue: '',
      tabIndex: 0,
    }
  },
  watch: {
    value(v) {
      console.log(v, 'v')
    },
    tabIndex(v) {
      console.log(v, 'v')
    },
  },
  methods: {
    onInput(e) {
      console.log(e.target.value)
      this.inputValue = e.target.value
    },
  },
}
</script>

<style></style>
